<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/libs/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/libs/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../css/libs/core.css" />
		<link rel="stylesheet" type="text/css" href="../../css/libs/home.css" />
		<link rel="stylesheet" type="text/css" href="../../css/libs/icon.css" />
		<link rel="stylesheet" type="text/css" href="../../css/fen-lei/fenlei.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" href="../../css/pulice.css">
		<script src="../../js/libs/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="../../js/fenlei.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				// 头、尾公共部分引入
				$('.hm-bar').load('../../data/headerIndex.html', function() {
					$(this).find('.messageBox').find('span').css('color', 'blue');
					$(this).find('.sreachBox').find('input').on('input', function() {
						val = $(this).val();
						if(val != '') {
							$('.sreach-result').show();
							$('body').css('overflow', 'hidden');
						} else {
							$('.sreach-result').hide();
							$('body').css('overflow', 'visible');
						}
						searchResult(SURL, val, indexTwo);
					});
				});
				$('.footer').load('../../data/footer.html');
				// 搜索结果滚动
				$('.sreach-result').scroll(function() {
					var vBot = $(this).scrollTop() + $(this).height();
					var wBot = $(this).find('.cnxh').height();
					if(vBot >= wBot) {
						searchResult(SURL, val, indexTwo, "add");
						indexTwo += 1;
					}
				});
				var myApp = new Vue({
					el:'#app',
					data:{
						account: [],
                        accountImg: {}
					},
					mounted:function () {
						this.$nextTick(function () {
							this.goodsFL();
                        });
                        this.$nextTick(function () {
                            this.gun();
                        });
                    },
					methods: {
					    goodsFL:function () {
							this.$http.get(SURL+"app/Goods/classify").then(function (res) {
							    console.log(res.body.data);
								if(res.body.status == 1) {
								    // this.account = res.body.data;
                                    this.accountImg = res.body.data[0].adses;
									for (var i = 1; i < res.body.data.length; i++){
                                        this.account.push(res.body.data[i]);
									}
                                    console.log(this.account);
								}
                            })
                        },
                        gun:function () {
                            var arr = [0],
                                num = 0;
                            $(".fenlei-right>div").each(function(index){
                                num += $(".fenlei-right>div").eq(index).height()+1;
                                arr.push(num);
                            });
                            $(".fenlei-left-ul li").on("click",function(){
                                var index = $(this).index();
                                // $(this).removeClass('liActive');
                                $(this).addClass('liActive').siblings().removeClass('liActive');
                                $(".fenlei-right").stop().animate({scrollTop:arr[index+1]},100)
                            });
                        }
					}
				})
			})

		</script>
		<style>
			/*.fenlei-left-ul li:first-child {*/
				/*color: #2A8FFF;*/
				/*background: #FFFFFF;*/
				/*border-left: 2px solid #2A8FFF;*/
			/*}*/
		</style>
	</head>

	<body>
	<!--class="liActive"-->
	<header class="hm-bar"></header>
		<div id="app">
			<nav>
				<div class="fenlei-left">
					<ul class="fenlei-left-ul">
						<li v-for="accName in account" @click="gun">{{accName.catName}}</li>
					</ul>
				</div>
				<div id="fenlei-right-wrap">
					<div class="fenlei-right">
						<div class="fenlei-right-1">
							<a :href="accountImg.adURL">
								<img :src="imgUrl+accountImg.adFile" alt="">
							</a>
						</div>
						<!--热门推荐-->
						<div v-for="accItem in account">
							<h2 class="">{{accItem.catName}}</h2>
							<div class="fenlei-right-2">
								<div class="fenlei-right-2-1" v-for="acclist in accItem.secondColumn">
									<img :src="imgUrl+acclist.catImg" />
									<p>{{acclist.catName}}</p>
								</div>
							</div>
						</div>
					</div>
				</div>

			</nav>
			<div class="footer"></div>
		</div>
	</body>
	<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/vue-resource.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/fenlei.js" type="text/javascript" charset="utf-8"></script>
</html>